<template>
    <div id="app">
        <div id="app-content">
            <router-view></router-view>
            <div class="player">
                <player></player>
            </div>
        </div>
<!--        <div style="position: sticky;top: 700px;right: 300px;background: white; z-index: 999">-->
<!--            <player></player>-->
<!--        </div>-->
        <el-backtop :right="200" :bottom="100">
            <div style="
                    height: 100%;
                    width: 100%;
                    background-color: var(--el-bg-color-overlay);
                    box-shadow: var(--el-box-shadow-lighter);
                    text-align: center;
                    line-height: 40px;
                    color: #1989fa;">
                <svg t="1662112877182" class="icon" viewBox="0 0 1024 1024"
                     version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3272" width="200" height="200"
                >
                    <path d="M0 0m0 0l1024 0q0 0 0 0l0 1024q0 0 0 0l-1024 0q0 0 0 0l0-1024q0 0 0 0Z"
                          fill="#E8EFF8" p-id="3273"
                    ></path>
                    <path d="M256 698.181818a23.272727 23.272727 0 0 1 23.272727-23.272727h465.454546a23.272727 23.272727 0 0 1 23.272727 23.272727v23.272727a23.272727 23.272727 0 0 1-23.272727 23.272728H279.272727a23.272727 23.272727 0 0 1-23.272727-23.272728v-23.272727z"
                          fill="#247ADE" p-id="3274"
                    ></path>
                    <path d="M304.546909 522.007273A23.272727 23.272727 0 0 0 323.723636 558.545455h350.487273a23.272727 23.272727 0 0 0 18.455273-37.469091l-165.050182-214.551273a46.545455 46.545455 0 0 0-75.170909 1.885091l-147.874909 213.620363z"
                          fill="#69CB91" p-id="3275"
                    ></path>
                </svg>
            </div>
        </el-backtop>
    </div>


</template>

<script>
import tab from "@/components/tab";
import myHeader from "@/components/header";
import {ref} from "vue";
import { ElLoading } from 'element-plus'
import Player from "@/components/players";

export default {
  name: 'App',
  components: {
      Player,
      tab,
      myHeader
  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#app-content{
    width: 700px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    background-color: white;
    border: 1px solid darkgrey;
}
.player{
}
</style>
